<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'


const tableData = [
    {
        type: '正常A班',
        name: 'Tom',
        duration: '5',
        time1: '08：30：01',
        time2: '17：29：59',
        state: '审批中',
        reason: '有事儿'

    },
    {
        type: '正常B班',
        name: 'Tom',
        duration: '5',
        time1: '08：30：01',
        time2: '17：29：59',
        state: '审批中',
        reason: '有事儿'

    },
    {
        type: '正常C班',
        name: 'Tom',
        duration: '5',
        time1: '08：30：01',
        time2: '17：29：59',
        state: '审批中',
        reason: '有事儿'

    },
    {
        type: '正常D班',
        name: 'Tom',
        duration: '5',
        time1: '08：30：01',
        time2: '17：29：59',
        state: '审批中',
        reason: '有事儿'
        
    },
]
</script>
<template>
    <div class="head">排班类型设定</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">

            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/j' }">时间管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/j' }">排班类型设定</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="l1">
            <el-button type="success" round><el-icon>
                    <Plus />
                </el-icon>新增</el-button>
            
        </div>
        <div class="l2">
            <div>
                <el-table :data="tableData" style="width: 100%">    
                    <el-table-column prop="type" label="排班类型" width="120" />
                    <el-table-column prop="time1" label="上班时间" width="120" />
                    <el-table-column prop="time2" label="下班时间" width="120" />
                    <el-table-column fixed="right" label="操作" min-width="300">
                        <template #default>
                            <el-button type="success" round><el-icon>
                                    <Plus />
                                </el-icon>修改</el-button>
                            <el-button type="danger" round><el-icon>
                                    <Minus />
                                </el-icon>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<style scoped>
.l1 {
    width: 100%;
    /* background-color: #777; */
    /* height: 215px; */
    padding: 20px;
}

.l2 {
    position: relative;
    left: 40px;
    width: 100%;
    height: 76px;
    display: flex;
    /* justify-content: center; */
    /* border: 1px solid #000; */
}


.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    /* height: 100%; */
    background-color: rgb(255, 255, 255);
    padding: 0;
}
</style>